import allMarker from "./mapMarker/allMarker";
import Station from "./station/station";
import {
    parkingDay, parkingMonth, parkingRate, dayCars, monthCars, carSta, enterDatas,
    noPeopleBus, playBus, dutyPeople, getAllCar, busData, dutyPerson, weekCars, parking
} from '../../axios/traffic/traffic'
import {toMillion} from '../../filters/index'
import moment from 'moment'

export default {
    props: {
        mapData: Object
    },
    data() {
        return {
            showHide: true,
            alertWindowShow: false,
            spanActive: 1,
            stationDatas: {},
            stationBusDatas: {},
            sunNums: {},
            rateDates: {},
            dayAllDatas: [],  //今日
            monthAllDatas: [],  //月统计
            dayCarsDatas: [],
            weekCarsDatas: [],
            monthCarsDatas: [],
            carsStop: {},  //停车位统计
            npPeopleBusDatas: {},  //无人车统计
            playBusDatas: {},  //观光车统计
            unmannedcar: [],// 无人车
            ferry: [], //摆渡车
            allCar: [],
            busPerson1: [],
            busPerson2: [],
            parking: [],//停车场
            timer:null,
        }
    },
    mounted() {
        this.getParkingDay();
        this.getParkingMonth();
        this.getParkingRate();
        this.getDayCars();
        this.getMonthCars();
        this.getCarSta();
        this.getEnterDatas();
        this.getNoPeopleBus();
        this.getPlayBus();
        // this.getDutyPeople();
        this.getBusData(1);
        this.getBusData(2);
        this.getDutyPerson(1);  //无人车值班人员
        this.getDutyPerson(2);  //观光车值班人员
        this.closeTheWindow();

        this.realTimeInit();  //实时刷新

        this.getMarkerData() //获取点位信息
    },
    methods: {
        realTimeInit() {
            //实时数据刷新 10s一次
            let that = this;
            this.timer = setInterval(function () {
                that.getParkingDay();
                that.getParkingMonth();
                that.getParkingRate();
                that.getDayCars();
                that.getMonthCars();
                that.getCarSta();
                that.getEnterDatas();
                that.getNoPeopleBus();
                that.getPlayBus();
                that.getBusData(1);
                that.getBusData(2);
                that.getDutyPerson(1);  //无人车值班人员
                that.getDutyPerson(2);  //观光车值班人员
            },10000)
        },
        closeTheWindow() {
            document.addEventListener('mouseup', (e) => {
                let box = this.$refs.windowBox
                if (box) {
                    if (!box.contains(e.target)) {
                        this.alertWindowShow = false
                    }
                }
            })
        },
        getParkingDay() {
            //当日进出场趋势
            parkingDay().then(res => {
                // let enterTotalNumStr = 0;
                // for(var i = 0; i < res.data.length; i++) {
                //     enterTotalNumStr += res.data[i].enterTotalNum;
                // }
                // this.sunNums.enterTotalDay = enterTotalNumStr;
                this.dayAllDatas = res.data;
            }, err => {
            })
        },
        getParkingMonth() {
            //当月进出场趋势
            parkingMonth().then(res => {
                // let enterTotalMonthStr = 0;
                // for(var i = 0; i < res.data.length; i++) {
                //     enterTotalMonthStr += res.data[i].enterTotalNum;
                // }
                // this.sunNums.enterTotalMonth = enterTotalMonthStr;
                this.monthAllDatas = res.data;
            }, err => {
            })
        },
        getParkingRate() {
            //车辆周转率
            parkingRate().then(res => {
                this.rateDates = res.data;
            }, err => {
            })
        },
        getDayCars() {
            //当日车辆排行
            dayCars().then(res => {
                this.dayCarsDatas = res.data;
            }, err => {
            })
        },
        getWeekCars() {
            //当周车辆排行
            weekCars().then(res => {
                this.weekCarsDatas = res.data;
            }, err => {
            })
        },
        getMonthCars() {
            //当月车辆排行
            monthCars().then(res => {
                this.monthCarsDatas = res.data;
            }, err => {
            })
        },
        getCarSta() {
            //车位统计
            carSta().then(res => {
                this.carsStop = res.data;
            }, err => {
            })
        },
        getEnterDatas() {
            //进场量
            enterDatas().then(res => {
                console.log(res)
                this.sunNums = res.data;
            }, err => {
            })
        },
        getNoPeopleBus() {
            //无人车统计
            noPeopleBus().then(res => {
                this.npPeopleBusDatas = res.data;
            }, err => {
            })
        },
        getPlayBus() {
            //观光统计
            playBus().then(res => {
                this.playBusDatas = res.data;
            }, err => {
            })
        },
        // getDutyPeople() {
        //     //获取值班人员
        //     dutyPeople().then(res => {
        //
        //     }, err => {
        //     })
        // },
        getBusData(type) {
            let params = {
                type: type
            }
            busData(params).then(res => {
                if (type == 1) {
                    //观光车
                    let list = [];
                    for (var i = 0; i < res.data.trafficSiteList.length; i++) {
                        list.push({
                            name: res.data.trafficSiteList[i].name,
                            type: this.randomNum(1, 4)
                        })
                    }
                    this.stationBusDatas = {
                        fromTime: res.data.startTime,
                        toTime: res.data.endTime,
                        times: res.data.intervalTime,
                        list: list
                    }
                } else if (type == 2) {
                    //无人车
                    let list = [];
                    for (var i = 0; i < res.data.trafficSiteList.length; i++) {
                        list.push({
                            name: res.data.trafficSiteList[i].name,
                            type: this.randomNum(1, 4)
                        })
                    }
                    this.stationDatas = {
                        fromTime: res.data.startTime,
                        toTime: res.data.endTime,
                        times: res.data.intervalTime,
                        list: list
                    }
                }
            }, err => {
            })
        },
        getDutyPerson(type) {
            let params = {
                type: type,
                day: moment().format('YYYY-MM-DD')
            }
            dutyPerson(params).then(res => {
                // console.log(res.data,333);
                if(res.data) {
                    // let arr1 = [];
                    // let arr2 = [];
                    // for (var i = 0; i < 9; i++) {
                    //
                    // }
                    if (type == 1) {
                        //无人车
                        // arr1.push(res.data[i].userName);
                        this.busPerson1 = res.data.slice(0,8);
                    } else if (type == 2) {
                        //观光车
                        // arr2.push(res.data[i].userName);
                        this.busPerson2 = res.data.slice(0,8);
                    }
                }

                if (res.data && res.data.length > 9) {
                    if (type == 1) {
                        this.busPerson1.push({userName:'更多'});
                    } else if (type == 2) {
                        this.busPerson2.push({userName:'更多'});
                    }
                }

            })
        },
        leftChatrs1Init() {
            var myChart = this.$echarts.init(document.getElementById('leftChatrs1'));
            var max = 100;
            var subtext = this.rateDates.privateTotalTurnoverRate;
            var value = ((subtext * 100) / max) * 100;
            var option = {
                title: {
                    show: true,
                    subtext,
                    x: 'center',
                    top: '30%',
                    subtextStyle: {
                        fontSize: '20',
                        color: '#FFFFFF',
                        fontFamily: 'DINAlternate-Bold, DINAlternate',
                        foontWeight: '500'
                    }
                },
                angleAxis: {
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    min: 0,
                    max: 132,
                    // boundaryGap: ['0', '10'],
                    startAngle: 225
                },
                radiusAxis: {
                    type: 'category',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    data: ['a', 'b', 'c'],
                    z: 10
                },
                polar: {
                    radius: '105%'
                },
                series: [{
                    type: 'bar',
                    data: [, , value],
                    z: 1,
                    coordinateSystem: 'polar',
                    barMaxWidth: 8,
                    name: '周转率',
                    roundCap: true,
                    color: new this.$echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [{
                            offset: 0,
                            color: '#32E9FF',
                        },
                            {
                                offset: 1,
                                color: '#fff',
                            }
                        ]
                    ),
                    barGap: '-100%',
                },
                    {
                        type: 'bar',
                        data: [, , max],
                        z: 0,
                        silent: true,
                        coordinateSystem: 'polar',
                        barMaxWidth: 8,
                        name: 'C',
                        roundCap: true,
                        color: '#176077',
                        barGap: '-100%',
                    },
                    {
                        type: 'gauge',
                        radius: '75%',
                        splitNumber: 4,
                        max: max,
                        detail: {
                            show: false,
                        },
                        axisLine: {
                            // 坐标轴线
                            lineStyle: {
                                // 属性lineStyle控制线条样式
                                color: [
                                    [0, "#176077"],
                                    [1, "#176077"]
                                ],
                                width: 8,
                                opacity: 0 //刻度背景宽度
                            }
                        },
                        data: [{
                            name: '',
                            value: '',
                        }
                        ],
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        pointer: {
                            show: false,
                        },
                    },
                    {
                        "type": "pie",
                        radius: ['91%', '82%'],
                        startAngle: 225,
                        endAngle: 0,
                        "data": [{
                            "name": "",
                            "value": value / max,
                            "label": {
                                show: false
                            },
                            "labelLine": {
                                show: false
                            },
                            itemStyle: {
                                color: 'rgba(0,0,0,0)'
                            }
                        },
                            { //画中间的图标
                                "name": "",
                                "value": 0,
                                "label": {
                                    position: 'inside',
                                    backgroundColor: '#fff',
                                    // borderRadius: 6,
                                    // padding: 6,
                                    borderWidth: 1,
                                    borderColor: "#fff",
                                }
                            }, {
                                "name": "",
                                value: 1.32 - value / max,
                                "label": {
                                    show: false
                                },
                                "labelLine": {
                                    show: false
                                },
                                itemStyle: {
                                    color: 'rgba(255,255,255,0)'
                                }
                            }
                        ]
                    }
                ],
                tooltip: {
                    show: false
                },
            }
            myChart.setOption(option)
        },
        leftChatrs2Init() {
            var myChart = this.$echarts.init(document.getElementById('leftChatrs2'));
            var max = 100;
            var subtext = this.rateDates.busTotalTurnoverRate;
            var value = ((subtext * 100) / max) * 100;

            var option = {
                title: {
                    show: true,
                    subtext,
                    x: 'center',
                    top: '30%',
                    subtextStyle: {
                        fontSize: '20',
                        color: '#FFFFFF',
                        fontFamily: 'DINAlternate-Bold, DINAlternate',
                        foontWeight: '500'
                    }
                },
                angleAxis: {
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    min: 0,
                    max: 132,
                    // boundaryGap: ['0', '10'],
                    startAngle: 225
                },
                radiusAxis: {
                    type: 'category',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    data: ['a', 'b', 'c'],
                    z: 10
                },
                polar: {
                    radius: '105%'
                },
                series: [{
                    type: 'bar',
                    data: [, , value],
                    z: 1,
                    coordinateSystem: 'polar',
                    barMaxWidth: 8,
                    name: '周转率',
                    roundCap: true,
                    color: new this.$echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [{
                            offset: 0,
                            color: '#52FFCC',
                        },
                            {
                                offset: 0.5,
                                color: '#1FFE9A',
                            },
                            {
                                offset: 1,
                                color: '#fff',
                            }
                        ]
                    ),
                    barGap: '-100%',
                },
                    {
                        type: 'bar',
                        data: [, , max],
                        z: 0,
                        silent: true,
                        coordinateSystem: 'polar',
                        barMaxWidth: 8,
                        name: 'C',
                        roundCap: true,
                        color: '#176077',
                        barGap: '-100%',
                    },
                    {
                        type: 'gauge',
                        radius: '75%',
                        splitNumber: 4,
                        max: max,
                        detail: {
                            show: false,
                        },
                        axisLine: {
                            // 坐标轴线
                            lineStyle: {
                                // 属性lineStyle控制线条样式
                                color: [
                                    [0, "#176077"],
                                    [1, "#176077"]
                                ],
                                width: 8,
                                opacity: 0 //刻度背景宽度
                            }
                        },
                        data: [{
                            name: '',
                            value: '',
                        }
                        ],
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        pointer: {
                            show: false,
                        },
                    },
                    {
                        "type": "pie",
                        radius: ['91%', '82%'],
                        startAngle: 225,
                        endAngle: 0,
                        "data": [{
                            "name": "",
                            "value": value / max,
                            "label": {
                                show: false
                            },
                            "labelLine": {
                                show: false
                            },
                            itemStyle: {
                                color: 'rgba(0,0,0,0)'
                            }
                        },
                            { //画中间的图标
                                "name": "",
                                "value": 0,
                                "label": {
                                    position: 'inside',
                                    backgroundColor: '#fff',
                                    // borderRadius: 6,
                                    // padding: 6,
                                    borderWidth: 1,
                                    borderColor: "#fff",
                                }
                            }, {
                                "name": "",
                                value: 1.32 - value / max,
                                "label": {
                                    show: false
                                },
                                "labelLine": {
                                    show: false
                                },
                                itemStyle: {
                                    color: 'rgba(255,255,255,0)'
                                }
                            }
                        ]
                    }
                ],
                tooltip: {
                    show: false
                },
            }
            myChart.setOption(option)
        },
        dayTop6Init() {
            var myChart = this.$echarts.init(document.getElementById('dayTop6'));
            let cityNames = [];
            let cityRates = [];
            if (this.dayCarsDatas.length == 0) {
                cityNames = [];
                cityRates = [];
            } else {
                for (var i = 0; i < this.dayCarsDatas.length; i++) {
                    cityNames.push(this.dayCarsDatas[i].provinceName);
                    cityRates.push(this.dayCarsDatas[i].totalNum);
                }
            }
            // const cityNames = ['河北','北京','上海','天津','黑龙江','浙江'];
            // const cityRates = [459,344,266,189,50,20];
            var option = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = ''
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].name + ' : ' + params[i].data + '<br>'
                        }
                        return str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                grid: {
                    top: 28,
                    left: 35,
                    right: 10,
                    bottom: 24
                },
                xAxis: {
                    data: cityNames.splice(0, 6),
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10
                    }
                },
                yAxis: {
                    name: '(辆)',
                    nameTextStyle: {
                        color: "#B2CEEC",
                        fontSize: 10,
                        padding: [0, 0, 0, -37]
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                        formatter: '{value}'
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    splitNumber: 5,
                    minInterval: 1,
                    max: function (value) {
                        if( value.max <= 1 ){
                            return value.max  = 10;
                        }if( value.max < 10 ){
                            return value.max = 10
                        }else{
                            return value.max;
                        }
                    }
                },
                series: [{
                    name: '今日车辆来源排行TOP6',
                    type: 'bar',
                    data: cityRates.splice(0, 6),
                    barCategoryGap: 55,
                    barWidth: 16,
                    itemStyle: {
                        color: '#2BADFF'
                    }
                }]
            }
            myChart.setOption(option)
        },
        monthTop6Init() {
            var myChart = this.$echarts.init(document.getElementById('monthTop6'));
            let cityNames = [];
            let cityRates = [];
            if (this.monthCarsDatas.length == 0) {
                cityNames = [];
                cityRates = [];
            } else {
                for (var i = 0; i < this.monthCarsDatas.length; i++) {
                    cityNames.push(this.monthCarsDatas[i].provinceName);
                    cityRates.push(this.monthCarsDatas[i].totalNum);
                }
            }
            // console.log(cityNames);
            // const cityNames = ['河北','北京','上海','天津','黑龙江','浙江'];
            // const cityRates = [1.4,1.2,0.8,0.7,0.6,0.2];
            var option = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = ''
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].name + ' : ' + params[i].data + '<br>'
                        }
                        return str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                grid: {
                    top: 28,
                    left: 43,
                    right: 10,
                    bottom: 24
                },
                xAxis: {
                    data: cityNames.splice(0, 6),
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10
                    }
                },
                yAxis: {
                    name: '(辆)',
                    nameTextStyle: {
                        color: "#B2CEEC",
                        fontSize: 10,
                        padding: [0, 0, 0, -32]
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                        formatter: '{value}'
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    minInterval: 1,
                    max: function (value) {
                        if( value.max <= 1 ){
                            return value.max  = 10;
                        }if( value.max < 10 ){
                            return value.max = 10
                        }else{
                            return value.max;
                        }
                    }
                },
                series: [{
                    name: '本月车辆来源排行TOP6',
                    type: 'bar',
                    data: cityRates.splice(0, 6),
                    barCategoryGap: 55,
                    barWidth: 16,
                    itemStyle: {
                        color: '#59EDFF'
                    }
                }]
            }
            myChart.setOption(option)
        },
        windowChartInit(datas) {
            var myChart = this.$echarts.init(document.getElementById('windowChart'));
            // const cityNames = ['河北石家庄','北京房山','上海浦东','河南洛阳','陕西西安','山西太原','河北保定','浙江杭州','天津河西','江苏苏州','北京海淀','山西吕梁','山东济南','湖南长沙','河北唐山'];
            // const cityRates = [4658,4255,4122,3855,3522,3122,2955,2755,2455,1522,1111,988,855,534,122];
            let cityNames = [];
            let cityRates = [];
            if (datas == 'day') {
                if (this.dayCarsDatas.length == 0) {
                    cityNames = [];
                    cityRates = [];
                } else {
                    for (var i = 0; i < this.dayCarsDatas.length; i++) {
                        cityNames.push(this.dayCarsDatas[i].provinceName);
                        cityRates.push(this.dayCarsDatas[i].totalNum);
                    }
                }
            } else if (datas == 'month') {
                if (this.monthCarsDatas.length == 0) {
                    cityNames = [];
                    cityRates = [];
                } else {
                    for (var i = 0; i < this.monthCarsDatas.length; i++) {
                        cityNames.push(this.monthCarsDatas[i].provinceName);
                        cityRates.push(this.monthCarsDatas[i].totalNum);
                    }
                }
            } else if (datas == 'week') {
                if (this.weekCarsDatas.length == 0) {
                    cityNames = [];
                    cityRates = [];
                } else {
                    for (var i = 0; i < this.weekCarsDatas.length; i++) {
                        cityNames.push(this.weekCarsDatas[i].provinceName);
                        cityRates.push(this.weekCarsDatas[i].totalNum);
                    }
                }
            }


            var option = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = ''
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].seriesName + ' : ' + params[i].data + '<br>'
                        }
                        return str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                grid: {
                    top: 28,
                    left: 40,
                    right: 10,
                    bottom: 24
                },
                xAxis: {
                    data: cityNames,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10
                    }
                },
                yAxis: {
                    name: '(辆)',
                    nameTextStyle: {
                        color: "#B2CEEC",
                        fontSize: 10,
                        padding: [0, 0, 0, -46]
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                        formatter: '{value}'
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    minInterval: 1,
                    max: function (value) {
                        if( value.max <= 1 ){
                            return value.max  = 10;
                        }if( value.max < 10 ){
                            return value.max = 10
                        }else{
                            return value.max;
                        }
                    }
                },
                series: [{
                    name: '车辆来源地排行TOP15',
                    type: 'bar',
                    data: cityRates,
                    barCategoryGap: 55,
                    barWidth: 16,
                    itemStyle: {
                        color: '#59EDFF'
                    }
                }]
            }
            myChart.setOption(option)
        },
        monthTrendInit() {
            // const dates = ['05.01','05.02','05.03','05.04','05.05','05.06','05.07','05.08','05.09','05.10','05.11','05.12','05.13','05.14','05.15','05.16','05.17','05.18','05.19','05.20','05.21','05.22','05.23','05.24','05.25','05.26','05.27','05.28','05.29','05.30','05.31'];
            // const outBus = [5000,8000,11000,13000,15000,5000,8000,11000,13000,15000,5000,8000,11000,13000,15000,5000,8000,11000,13000,15000,5000,8000,11000,13000,15000,5000,8000,11000,13000,15000,2000];
            // const inBus = [25800,22000,18000,15000,12000,25800,22000,18000,15000,12000,25800,22000,18000,15000,12000,25800,22000,18000,15000,12000,25800,22000,18000,15000,12000,25800,22000,18000,15000,12000,8000];
            const myChart = this.$echarts.init(document.getElementById('monthTrend'));
            var inBus = [];
            var outBus = [];
            var dates = [];
            for (var i = 0; i < this.monthAllDatas.length; i++) {
                inBus.push(this.monthAllDatas[i].enterTotalNum);
                outBus.push(this.monthAllDatas[i].outTotalNum);
                dates.push(this.monthAllDatas[i].selectTime.substring(5, 10).replace('-', '.'))
            }
            const options = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = ''
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].seriesName + ' : ' + params[i].data + '<br>'
                        }
                        return str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                legend: {
                    type: 'plain',
                    icon: 'roundRect',
                    itemWidth: 5,
                    itemHeight: 5,
                    top: 6,
                    right: 0,
                    textStyle: {
                        color: '#B2CEEC',
                        fontSize: 10
                    }
                },
                grid: {
                    top: 40,
                    left: 60,
                    right: 4,
                    bottom: '12%'
                },
                xAxis: {
                    data: dates,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                    }
                },
                yAxis: {
                    name: '(辆)',
                    nameTextStyle: {
                        color: "#B2CEEC",
                        fontSize: 10,
                        padding: [0, 0, 0, -50]
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    minInterval: 1,
                    max: function (value) {
                        if( value.max <= 1 ){
                            return value.max  = 10;
                        }if( value.max < 10 ){
                            return value.max = 10
                        }else{
                            return value.max;
                        }
                    }
                },
                series: [{
                    name: '入园车辆数据',
                    type: 'line',
                    data: outBus,
                    lineStyle: {
                        color: '#32E9FF',
                        width: 3
                    },
                    itemStyle: {
                        color: '#32E9FF'
                    },
                    symbolSize: 0,
                    symbol: 'circle',
                    smooth: false,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(50,233,255,0.4)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(50,233,255,0.4)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }, {
                    name: '出园车辆数据',
                    type: 'line',
                    data: inBus,
                    lineStyle: {
                        color: '#27FE9C',
                        width: 3
                    },
                    itemStyle: {
                        color: '#27FE9C'
                    },
                    symbolSize: 0,
                    symbol: 'circle',
                    smooth: false,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(31,254,154,0.4)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(31,254,154,0.4)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }]
            }
            myChart.setOption(options)
        },
        dayTrendInit() {
            const myChart = this.$echarts.init(document.getElementById('dayTrend'));
            var inBus = [];
            var outBus = [];
            var times = [];
            for (var i = 0; i < this.dayAllDatas.length; i++) {
                inBus.push(this.dayAllDatas[i].enterTotalNum);
                outBus.push(this.dayAllDatas[i].outTotalNum);
                times.push(this.dayAllDatas[i].selectTime + ':00')
            }
            const options = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = ''
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].seriesName + ' : ' + params[i].data + '<br>'
                        }
                        return str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                legend: {
                    type: 'plain',
                    // icon: 'roundRect',
                    itemWidth: 5,
                    itemHeight: 5,
                    right: 0,
                    textStyle: {
                        color: '#B2CEEC',
                        fontSize: 10
                    }
                },
                grid: {
                    top: 40,
                    left: 60,
                    right: 4,
                    bottom: '12%'
                },
                xAxis: {
                    data: times,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                    }
                },
                yAxis: [
                    {
                        name: '(辆)',
                        nameTextStyle: {
                            color: "#B2CEEC",
                            fontSize: 10,
                            padding: [0, 0, 0, -50]
                        },
                        type: 'value',
                        axisLabel: {
                            color: '#B2CEEC',
                            fontSize: 10
                        },
                        axisLine: {
                            show: false,
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(48,178,236,0.6)'
                            }
                        },
                        minInterval: 1,
                        max: function (value) {
                            if( value.max <= 1 ){
                                return value.max  = 10;
                            }if( value.max < 10 ){
                                return value.max = 10
                            }else{
                                return value.max;
                            }
                        }
                        // minInterval: 1
                    },
                ],
                series: [{
                    name: '入园车辆数据',
                    type: 'bar',
                    data: inBus,
                    lineStyle: {
                        color: '#2BADFF'
                    },
                    itemStyle: {
                        color: '#2BADFF'
                    },
                    symbolSize: 3,
                    symbol: 'circle',
                    yAxisIndex: 0,
                    barGap: '0%',
                    barWidth:10
                }, {
                    name: '出园车辆数据',
                    type: 'bar',
                    data: outBus,
                    lineStyle: {
                        color: '#59EDFF'
                    },
                    itemStyle: {
                        color: '#59EDFF'
                    },
                    symbolSize: 3,
                    symbol: 'circle',
                    yAxisIndex: 0,
                    barGap: '0%',
                    barWidth:10
                }]
            }
            myChart.setOption(options)
        },
        changeShow() {
            this.showHide = !this.showHide;
        },
        closeWindow() {
            this.alertWindowShow = false;
        },
        openWindow() {
            this.alertWindowShow = !this.alertWindowShow;
        },
        changeDates(index) {
            this.spanActive = index;
            if (index == 1) {
                //今日
                this.getDayCars();
            } else if (index == 2) {
                //周
                this.getWeekCars();
            } else if (index == 3) {
                //月
                this.getMonthCars();
            }
        },
        randomNum(min, max) {
            return Math.floor(Math.random() * (max - min)) + min;
        },
        // 获取点位信息
        getMarkerData() {
            // 获取车辆信息
            getAllCar().then(res => {
                this.allCar = res.data
                res.data.forEach(item => {
                    if (item.type === "1") {
                       item.names = "摆渡车"
                       this.unmannedcar.push(item) // 无人车
                    } else if (item.type === "2") {
                       item.names= "无人车"
                       this.ferry.push(item) // 摆渡车
                    }
                })
                //this.$refs.allMarker.setAllMarker(this.allCar, this.mapData)
            })
            // 停车场
            parking().then(res => {
                console.log(res.data, '=-=-=-==-')
                res.data.forEach(item => {
                    item.names = "停车场"
                })
                this.parking = res.data
            })


            setTimeout(() => {
                this.markerData = [
                    this.unmannedcar,// 无人车
                    this.ferry,// 摆渡车
                    this.parking
                ]
                this.$refs.allMarker.setAllMarker(this.markerData, this.mapData)
            }, 800)


        },
    },
    watch: {
        rateDates(val) {
            this.leftChatrs1Init();
            this.leftChatrs2Init();
        },
        dayAllDatas(val) {
            this.dayTrendInit();
        },
        monthAllDatas(val) {
            this.monthTrendInit();
        },
        dayCarsDatas(val) {
            this.dayTop6Init();
            this.windowChartInit('day');
        },
        monthCarsDatas(val) {
            this.monthTop6Init();
            this.windowChartInit('month');
        },
        weekCarsDatas(val) {
            this.windowChartInit('week');
        }
    },
    components: {
        allMarker,
        Station
    },
    // 页面销毁前清空点标记
    beforeDestroy() {
        // this.$emit('removeMarker')
        clearInterval(this.timer);
    }

}